<template>
  <div class="message-container">
    <div class="header">
      <div class="back-button" @click="fanhui">
        <van-icon name="arrow-left" />
      </div>
      <div class="title">消息通知</div>
    </div>
    <div class="notifications">
      <div class="notification-item" v-for="(orders, index) in order" :key="index">
        <div class="notification-image">
          <img :src="orders.imageUrl" />
        </div>
        <div class="notification-content">
          <div class="notification-title">租车成功</div>
          <div class="notification-time">{{ orders.createdAt |format("yyyy-MM-dd hh:mm")}}</div>
          <div class="notification-message">您已成功下单，我们为您预留的<br>车【京A·A1234】，请尽快提车</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessagingView",
  data() {
    return {
      userId: '',
      order: []
      // notificationList: [
      //   {
      //     imageUrl: "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_002.PNG?e=1737029452&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:C3V-R1ab160JrriqGlTC12bq3YA=",
      //     title: "租车成功",
      //     time: "2025.01.01 10:00",
      //     message: "您已成功下单，我们为您预留的车【苏A1234】，请尽快提车"
      //   },
      //   {
      //     imageUrl: "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_002.PNG?e=1737029452&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:C3V-R1ab160JrriqGlTC12bq3YA=",
      //     title: "租车成功",
      //     time: "2025.01.01 10:00",
      //     message: "您已成功下单，我们为您预留的车【苏A1234】，请尽快提车"
      //   },
      //   {
      //     imageUrl: "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_002.PNG?e=1737029452&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:C3V-R1ab160JrriqGlTC12bq3YA=",
      //     title: "租车成功",
      //     time: "2025.01.01 10:00",
      //     message: "您已成功下单，我们为您预留的车【苏A1234】，请尽快提车"
      //   }
      // ]
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    findAll(){
      console.log(this.userId)
      this.axios.get(`http://localhost:10086/api/order/notifications/NotificationsAll/${this.userId}`)
          .then(response => {
            if (response.data.code === 200){
              this.order=response.data.data;
            }else{
              this.$message.error(response.data.message);
            }
        })
    }
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
  created() {
    const user = localStorage.getItem('currentUser');
    if (user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
      this.userId = JSON.parse(user).userId;
      this.findAll();
  }
};
</script>

<style scoped>
.message-container {
  background-color: #F7F7F7;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 15px;
  background-color: #F7F7F7;
}

.back-button {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.back-button van-icon {
  font-size: 20px;
}

.title {
  font-size: 20px;
  margin-left: 15px;
}

.notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px;
}

.notification-item {
  display: flex;
  background-color: white;
  width: 300px;
  height: 100px;
  border-radius: 5px;
  margin-top: 20px;
}

.notification-image {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  margin: 15px;
}

.notification-image img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.notification-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

.notification-title {
  font-size: 14px;
  margin-right: 131px;
  font-weight: 900;
}

.notification-time {
  font-size: 8px;
  margin-left: 64px;
}

.notification-message {
  font-size: 10px;
  margin-top: 4px;
  margin-right: 48px;
}
</style>